<template>
    <view class="webview-container">
        
        <!-- webview内容 -->
        <web-view 
            :src="webviewUrl" 
            @message="handleMessage"
            @error="handleError"
            @loading="handleLoading"
        ></web-view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 页面参数
const webviewUrl = ref('')
const pageTitle = ref('网页浏览')

// 获取页面参数
onMounted(() => {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const options = currentPage.options
    
    if (options.url) {
        webviewUrl.value = decodeURIComponent(options.url)
    }
    
    if (options.title) {
        pageTitle.value = decodeURIComponent(options.title)
    }
})

// 返回上一页
const handleGoBack = () => {
    uni.navigateBack()
}

// 处理webview消息
const handleMessage = (event) => {
    console.log('webview message:', event)
}

// 处理webview错误
const handleError = (event) => {
    console.error('webview error:', event)
    uni.showToast({
        title: '页面加载失败',
        icon: 'none'
    })
}

// 处理webview加载状态
const handleLoading = (event) => {
    console.log('webview loading:', event)
}
</script>

<style lang="scss" scoped>
.webview-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.custom-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 24rpx;
    background: #FFFFFF;
    border-bottom: 1rpx solid #F0F0F0;
    position: relative;
    z-index: 100;
    
    .navbar-left {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .back-icon {
            width: 32rpx;
            height: 32rpx;
        }
    }
    
    .navbar-title {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        line-height: 88rpx;
    }
    
    .navbar-right {
        width: 60rpx;
    }
}

web-view {
    flex: 1;
    width: 100%;
}
</style>
